<template>
    <div
        class="ReissueCard"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <el-card class="box-card">
            <div slot="headerss" class="clearfix text_fl">
                <span>公共服务类-->补卡</span>
                <el-button class="btn_close" type="text" @click="handleClose">关闭</el-button>
            </div>
            <div>
                <!-- <div class="tab-header text_center">
                    <div class="headerTitles">补卡</div>
                </div>-->
                <div v-show="!ReissueCardSuccess">
                    <el-form ref="formData" :model="formData" :rules="rules" label-width="150px">
                        <el-row>
                            <el-col :span="10" :offset="1">
                                <div class="text_center width30">
                                    <el-form-item label="账户类别:" class="text_fl">
                                        <span class="el-form-item-span">{{CATEGORY_filter}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="text_center width30">
                                    <el-form-item label="卡号:" class="text_fl">
                                        <el-input :disabled="true" v-model.trim="formData.CARDNO"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10" :offset="1">
                                <div class="text_center width30">
                                    <el-form-item
                                        label="凸字姓名(姓/名/):"
                                        class="text_fl"
                                        prop="EMBNAME"
                                    >
                                        <el-input
                                            v-model="EMBNAME_filter"
                                            class="textSpan"
                                            placeholder=" 姓/名/"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="text_center width30">
                                    <el-form-item label="递卡方式:" class="text_fl" prop="DSPCHCD">
                                        <el-select
                                            v-model="formData.DSPCHCD"
                                            placeholder="请选择递卡方式"
                                            clearable
                                        >
                                            <el-option
                                                v-for="item in isDSPCHCDOption"
                                                :label="item.label"
                                                :value="item.code"
                                                :key="item.label"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10" :offset="1">
                                <div class="text_center width30">
                                    <el-form-item label="卡片递送地址类型:" class="text_fl" prop="CARDTO">
                                        <el-select
                                            v-model="formData.CARDTO"
                                            placeholder="请选择递卡地址类型"
                                            clearable
                                        >
                                            <el-option
                                                v-for="item in isCARDTOOption"
                                                :label="item.label"
                                                :value="item.code"
                                                :key="item.label"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="text_center width30">
                                    <el-form-item label="递送费用:" class="text_fl" prop="COURIERFEE">
                                        <el-select
                                            v-model="formData.COURIERFEE"
                                            placeholder="请选择递送费用"
                                            clearable
                                        >
                                            <el-option
                                                v-for="item in isCOURIERFEEOption"
                                                :label="item.label"
                                                :value="item.code"
                                                :key="item.label"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10" :offset="1">
                                <div class="text_center width30">
                                    <el-form-item label="补卡费用:" class="text_fl" prop="REPLACEFEE">
                                        <el-select
                                            v-model="formData.REPLACEFEE"
                                            placeholder="请选择补卡费用"
                                            clearable
                                        >
                                            <el-option
                                                v-for="item in isREPLACEFEEOption"
                                                :label="item.label"
                                                :value="item.code"
                                                :key="item.label"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="text_center width30">
                                    <el-form-item label="补卡换卡次数:" class="text_fl">
                                        <el-input :disabled="true" v-model="formData.ISSUENBR"></el-input>
                                        <el-input
                                            type="hidden"
                                            :disabled="true"
                                            v-model="formData.ISSRSN"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="text_center">
                            <el-button
                                type="primary"
                                size="small"
                                @click.native="submitFormReissueCard"
                                icon="el-icon-circle-check"
                            >确定</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                plain
                                @click.native="addressEdit"
                            >客户地址信息修改</el-button>
                        </div>
                    </el-form>
                    <el-dialog
                        v-drag
                        title="补卡"
                        :visible.sync="centerDialogVisible"
                        width="500px"
                        :append-to-body="true"
                        top="30vh"
                        :close-on-click-modal="false"
                        center
                    >
                        <p>
                            卡号：
                            <span>{{this.formData.CARDNO}}</span>
                        </p>
                        <p>
                            卡产品：
                            <span>{{this.PRODUCT_value}}</span>
                        </p>
                        <p class="text_center padding_top15">
                            <span style="color:#3a8ee6; ">您确定对该卡号进行补卡操作？</span>
                        </p>
                        <span slot="footer" class="dialog-footer">
                            <el-button
                                size="small"
                                icon="el-icon-circle-close"
                                @click="centerDialogVisible = false"
                            >取 消</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="handerCardReissue"
                                icon="el-icon-circle-check"
                            >确定</el-button>
                        </span>
                    </el-dialog>
                </div>
                <div v-show="ReissueCardSuccess">
                    <reissue-card-item
                        v-if="ReissueCardSuccess"
                        :ReissueCardSuccess="ReissueCardSuccess"
                    ></reissue-card-item>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import ReissueCardItem from './childItem/ReissueCardItem.vue';
import {
    closePage, getDictSelectList, itoStr, getDictMappingValue,
} from '@/utils/Common';

export default {
    name: 'ReplacePhysicalCard',
    data() {
        return {
            formData: {},
            isDSPCHCDOption: [], // 递卡方式 isDESPATCHOption DSPCHCD
            isCARDTOOption: [], // 卡片递送地址类型
            isREPLACEFEEOption: [], // 换卡费用代码选项
            isCOURIERFEEOption: [], // 递送费用代码选项
            ReissueCardSuccess: '', // 补卡成功后的信息
            centerDialogVisible: false, // 弹框是否显示
            PRODUCT_value: '', // //卡产品 在数据字典里的值
            CATEGORY_filter: '',
            productId: '',
            EMBNAME_filter: '', // 凸字姓名
            rules: {
                EMBNAME: [{ required: true, message: '凸字姓名不能为空！', trigger: 'blur' }],
                DSPCHCD: [{ required: true, message: '递卡方式不能为空！', trigger: 'change' }],
                CARDTO: [
                    { required: true, message: '卡片递送地址类型不能为空！', trigger: 'blur' },
                    // {type:'string',message:'卡片递送地址类型为字符串',whitespace:true}
                ],
                COURIERFEE: [{ required: true, message: '递送费用不能为空！', trigger: 'change' }],
                REPLACEFEE: [{ required: true, message: '补卡费用不能为空！', trigger: 'change' }],
            },
            Card_STAT: '',
            pageLoading: false,
        };
    },
    components: {
        ReissueCardItem,
    },
    computed: {
        ...mapGetters([
            'cardInfo_3004',
            'defaultParams',
            'pinFlag',
        ]),

        isdefaultParams() {
            return this.defaultParams;
        },
    },
    mounted() {
        this.pageLoading = true;
        this.formData = {
            CATEGORY: this.cardInfo_3004.CATEGORY, // 账户类别
            CARDNO: this.cardInfo_3004.CARDNO, // 卡号
            CARDNBR: this.cardInfo_3004.CARDNO, // 卡号
            EMBNAME: this.cardInfo_3004.EMBNAME, // 凸字姓名
            ISSUENBR: this.cardInfo_3004.ISSUENBR, // 换卡次数
            // DESPATCH:'POST',//预定递送方式或递送方式
            COURFEE: `${this.cardInfo_3004.COURIERFEE}`, // 递送费用代码
            REPFEE: `${this.cardInfo_3004.REPLACEFEE}`, // 换卡费用代码
            CARDTO: `${this.cardInfo_3004.CARDTO.trim()}`, // /卡片递送地址类型
            // CARDTO: '',
            DSPCHCD: 'POST', // this.cardInfo_3004.DESPATCH,//递卡方式
            ISSRSN: 'L', // 换卡原因
            CHECKFLG: '000000000000000', // 检查项目选择
            CDFRM: 'A', // 卡片版面  必填字段 可以给四个空格
            PINREQD: '0', // 是否产生PIN 1:不产生PIN 0:产生PIN
            KEEPYN: '0', // 换卡保留卡号选项
            CDISSFLAG: '0', // 即时制卡 0：否（默认）1：是
            PINFLAG: this.pinFlag,
        };
        this.Card_STAT = (this.cardInfo_3004.CARDSTAT + '').trim()
        this.productId = this.cardInfo_3004.PRODUCT;
        // dspchcd cardto
        this.getDictInfovalue();
        //  this.isREPLACEFEEOption=this.getDictInfo("COURFEE");
        //  this.isCOURIERFEEOption=this.getDictInfo("REPFEE");
    },

    methods: {
        // 请求数据字典里的字段
        async getDictInfovalue() {
            this.isDSPCHCDOption = await getDictSelectList('DSPCHCD', this);
            // 寄送地址类型
            this.isCARDTOOption = await getDictSelectList('MAILINGADDRESS', this);
            // 
            this.isREPLACEFEEOption = await getDictSelectList('REPFEE', this);
            this.isCOURIERFEEOption = await getDictSelectList('COURFEE', this);
            this.PRODUCT_value = await getDictMappingValue('PRODUCT', this.cardInfo_3004.PRODUCT, this);
            this.CATEGORY_filter = await getDictMappingValue('CATE', this.cardInfo_3004.CATEGORY, this);
            this.getExecuteFun();
            this.disPoseName(this.cardInfo_3004.EMBNAME, this.cardInfo_3004.EMBOSSSUL, this.cardInfo_3004.EMBOSSSUR);
            this.pageLoading = false;

        },

        async getExecuteFun() {
            this.productId = itoStr(this.cardInfo_3004.PRODUCT, 4);
            if (this.productId === '0046') {
                this.$alert(
                    `此卡为: ${this.PRODUCT_value}\n补卡功能锁定，跳转至保号换卡工单界面申请！`,
                    '接口提示',
                    { customClass: 'warning', type: 'warning', showClose: false },
                ).then(() => {
                    closePage(this.$route, this, 1);
                });
            }
            if (this.Card_STAT.trim() === 'H' || this.Card_STAT.trim() === "O") {
                // 判断当前卡的可用额度和信用额度是否相等
                if (this.cardInfo_3004.CRDLIMT !== this.cardInfo_3004.AVLIMT) {
                    this.$alert(
                        `当前客户有欠款，请还款后再致电补卡`,
                        '接口提示',
                        { customClass: 'warning', type: 'warning', showClose: false },
                    ).then(() => {
                        closePage(this.$route, this, 1);
                    });
                }
            } else if (this.Card_STAT.trim() === 'U') {
                this.$alert(
                    `当前卡片为睡眠卡，请先转为未激活状态，再进行换卡操作`,
                    '接口提示',
                    { customClass: 'warning', type: 'warning', showClose: false },
                ).then(() => {
                    closePage(this.$route, this, 1);
                });
            };
        },
        // 开始补卡
        handerCardReissue() {
            this.setsubmitForm();
            this.centerDialogVisible = false;
        },
        // 从数据字典里查  产品编号对应的文字
        submitFormReissueCard() {
            this.$refs.formData.validate((valid) => {
                if (valid) {
                    this.centerDialogVisible = true;
                }
            });
        },
        // 处理 凸字姓名
        // name 凸字姓名  number 截取位数
        disPoseName(name, number, number2) {
            let nameValue = '';
            nameValue = name.substring(0, number - 1);
            nameValue = `${nameValue}/${name.substring(number - 1, number2)}`;
            nameValue = `${nameValue}/${name.substring(number2)}`;
            nameValue && (nameValue = (`${nameValue}`).trim());
            this.EMBNAME_filter = nameValue;
        },
        // 发送请求 开始补卡
        setsubmitForm() {
            const defaultParams = JSON.parse(JSON.stringify(this.isdefaultParams));
            defaultParams.body.appBody = Object.assign(this.defaultParams.body.appBody, this.formData);
            defaultParams.body.appHead.tranCode = '4025';// 修改交易号
            console.log(defaultParams);
            this.$post.common.transPort(defaultParams).then((res) => {
                if (res.status === 200) { // 请求成功
                    const cardlossofs = JSON.parse(res.data.jsonRes);
                    if (cardlossofs.sysHead.rspCd == '000000') { // 交易成功
                        console.log(cardlossofs, 'cardlossofs');
                        this.ReissueCardSuccess = cardlossofs;
                        this.ReissueCardSuccess.CATEGORY_filter = this.CATEGORY_filter;
                        this.ReissueCardSuccess.CARDNO = this.formData.CARDNO;
                    } else {
                        const ErrorMessage = `错误码：${cardlossofs.sysHead.rspCd} ` + `错误信息：${cardlossofs.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, cardlossofs.sysHead.busiName, { customClass: 'error', type: 'error' });
                    }
                }
                this.centerDialogVisible = false; // 关闭弹框
            });
        },
        addressEdit() {
            this.$router.push({ path: '/customerInfomationChange/addressEdit' });
        },
        // 点击关闭
        handleClose() {
            closePage(this.$route, this, 1);
        },
    },
};
</script>

<style lang='scss' >
.ReissueCard {
    /* .el-form-item-span {
        background-color: #f5f7fa;
        border-color: #e4e7ed;
        color: #606266;
        cursor: not-allowed;
        width: 250px;
        min-width: 200px;
        height: 35px;
        line-height: 35px;
        display: inline-block;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        padding: 0 15px;
    } */
    .el-card__header {
        padding: 8px !important;
    }
    .el-form-item__content {
        text-align: left;
    }
    .el-form-item-input input,
    /* .el-input input {
        width: 250px;
        min-width: 200px;
        height: 35px;
        line-height: 35px;
    } */

    .textSpan {
        width: 250px;
    }
    .el-dialog__body p {
        text-align: left;
        padding-left: 30%;
        margin: 8px 5px;
        span {
            color: #3a8ee6;
        }
    }
    .el-card.is-always-shadow {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .el-card {
        border: none;
    }
}
</style>
